<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <form class="layui-form center">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号类型</label>
                        <div class="layui-input-block">
                            <input type="radio" lay-filter='accountTypeFilter' name="accountType" value="1" title="银行账号" checked="checked">
                            <input type="radio" lay-filter='accountTypeFilter' name="accountType" value="2" title="微信账号">
                            <input type="radio" lay-filter='accountTypeFilter' name="accountType" value="3" title="支付宝账号">
                        </div>
                    </div>
                    <div class="layui-form-item accInfoDiv">
                        <label class="layui-form-label">银行名称</label>
                        <div class="layui-input-block">
                            <input type="text" required  name="bankName"  lay-verify="required" placeholder="请输入银行名称" autocomplete="off" class="layui-input accInfo">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" id='accountNameLabel'>账号名称</label>
                        <div class="layui-input-block">
                            <input type="text" required  name="accountName" id="accountName" lay-verify="required" placeholder="请输入账号名称" autocomplete="off" class="layui-input accInfo">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" id='accountNoLabel'>银行卡号</label>
                        <div class="layui-input-block">
                            <input type="text" required  name="accountNo" id="accountNo" lay-verify="required|number" placeholder="请输入银行卡号" autocomplete="off" class="layui-input accInfo">
                        </div>
                    </div>
                    <div class="layui-form-item accInfoDiv">
                        <label class="layui-form-label">开户省</label>
                        <div class="layui-input-block">
                            <input type="text" required name="province"  lay-verify="required" placeholder="请输入开户省" autocomplete="off" class="layui-input accInfo allAccInput">
                        </div>
                    </div>

                    <div class="layui-form-item accInfoDiv">
                        <label class="layui-form-label">开户市</label>
                        <div class="layui-input-block">
                            <input type="text" required name="city"  lay-verify="required" placeholder="请输入开户市" autocomplete="off" class="layui-input accInfo allAccInput">
                        </div>
                    </div>

                    <div class="layui-form-item accInfoDiv">
                        <label class="layui-form-label">开户网点名称</label>
                        <div class="layui-input-block">
                            <input type="text" required name="bankNetName"  lay-verify="required" placeholder="请输入开户网点名称" autocomplete="off" class="layui-input accInfo allAccInput">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-block">
                            <input type="text" required name="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input remarkInfo">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">默认</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="isDefault" title="是" value="1" />
                            <input type="radio" name="isDefault" title="否" value="0" checked="checked"/>
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <div class="layui-input-block">
                            <button type="button" lay-submit lay-filter="btnJS" class="layui-hide xxpayYesBtn">保存</button>
                        </div>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<script>
   
        layui.use(['form','util','admin'], function(){
            var form = layui.form
            ,$ = layui.$
            ,admin = layui.admin
            ,element = layui.element;

            element.render('breadcrumb', 'breadcrumb');//渲染导航信息

            //监听提交
            form.on('submit(btnJS)', function(data){
                // 在这个回调函数里面写ajax提交
                admin.req({
                    type: 'post',
                    url: layui.setter.baseUrl + '/bank_account/add',
                    data: data.field,
                    success: function(res){
                        if(res.code == 0){
                            layer.alert(res.msg,{title: "保存成功"},function(index){
                                layer.closeAll(); //关闭所有弹层
                                layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                            })
                        }
                    }
                });
                return false;//阻止跳转
            });

            form.on('radio(accountTypeFilter)', function(data){

                //判断切换的类型 是否与当前一样
                if($('#accountTypeDiv').attr('currentType') == data.value){
                    return false;
                }

                $('#accountTypeDiv').attr('currentType', data.value);

                if(data.value == '1'){ //银行卡
                    $('.allAccInput').val(""); //清空所有信息
                    $('.accInfo').attr('required',"").attr('lay-verify', 'required'); //添加必填限制
                    $('.accInfoDiv').show();  //显示银行卡特有内容

                    $("#accountNameLabel").text('账号名称');
                    $("#accountName").attr('placeholder', '请输入账号名称');

                    $("#accountNoLabel").text('银行卡号');
                    $("#accountNo").attr('placeholder', '请输入银行卡号');


                }else if(data.value == '2'){ //微信

                    $('.allAccInput').val(""); //清空所有信息
                    $('.accInfo').removeAttr('required').removeAttr('lay-verify'); //解除银行卡的限制条件
                    $('.accInfoDiv').hide();  //隐藏银行卡特有内容

                    $("#accountNameLabel").text('微信姓名');
                    $("#accountName").attr('placeholder', '请输入微信姓名');

                    $("#accountNoLabel").text('OpenId');
                    $("#accountNo").attr('placeholder', '请输入OpenId');

                }else if(data.value == '3'){ //支付宝

                    $('.allAccInput').val(""); //清空所有信息
                    $('.accInfo').removeAttr('required').removeAttr('lay-verify');  //解除银行卡的限制条件
                    $('.accInfoDiv').hide();  //隐藏银行卡特有内容

                    $("#accountNameLabel").text('支付宝账号姓名');
                    $("#accountName").attr('placeholder', '请输入支付宝账号姓名');

                    $("#accountNoLabel").text('支付宝账号');
                    $("#accountNo").attr('placeholder', '请输入支付宝账号');

                }
                form.render();
            });
            form.render();
        })
</script>